<!DOCTYPE HTML>
<html lang="zh-cn" style="height: auto">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="resources/css/common.css" rel="stylesheet"/>
    <title>设备运行管控</title>

    <link href="resources/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="resources/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="resources/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="resources/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="resources/plugins/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="resources/css/zui.css" rel="stylesheet"/>
    <link href="resources/css/zui.lite.css" rel="stylesheet"/>
    <link href="resources/css/zui-theme.css" rel="stylesheet"/>
    <link href="resources/css/common.css" rel="stylesheet"/>
    <link href="resources/css/jk_control.css" rel="stylesheet"/>
    <link href="resources/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>



    <script src="resources/plugins/jquery.1.12.4.min.js"></script>
    <script src="resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <script src="resources/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="resources/plugins/waves-0.7.5/waves.min.js"></script>
    <script src="resources/plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="resources/plugins/select2/js/select2.min.js"></script>
    <script src="resources/js/common.js"></script>
    <script src="resources/plugins/device.min.js"></script>
    <!-- yourself js-->
    <script src="resources/js/admin.js"></script>

    <!--echarts-->
    <script src="resources/js/echarts.min.js"></script>
</head>
<body>

<div class="jk_main">
    <div class="main" style="width: 97%;margin-left: 20px;height: 90%">
        <table id="table" style="text-align: center;height: 80%"></table>
    </div>
<ul class="visualization" style="display: inline">
    <li style="float: left;display: inline"><div id="container1" style="width: 230px;height: 200px;" class="wenduyibiaopan"></div></li>
    <li style="float: left;display: inline"><div id="container2" style="width: 230px;height: 200px;" class="wenduyibiaopan"></div></li>
    <li style="float: left;display: inline"><div id="container3" style="width: 230px;height: 200px;" class="wenduyibiaopan"></div></li>
    <li style="float: left;display: inline"><div id="container4" style="width: 230px;height: 200px;" class="wenduyibiaopan"></div></li>
    <li style="float: left;display: inline"><div id="container5" style="width: 230px;height: 200px;" class="wenduyibiaopan"></div></li>
</ul>
    <div class="modal fade" id="cons" tabindex="－1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 9999;width: 80%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">可视化</h4>
                </div>
                <div class="modal-body">
                    <div class="pie" id="pie" style="width: 900px;height: 500px;"></div>
                    <div class="bar" id="bar" style="width: 900px;height: 600px;"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<!--数据曲线图可视化-->
<div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style=" width:680px; height: 60% ;z-index: 9999">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">数据可视化</h4>
            </div>
            <div class="modal-body" style="width:680px; height: 440px ;overflow:auto">
                <div id="qcontainer" style="height: 450px;width: 600px;"></div>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" id="submit2" type="button">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script src="resources/js/common.js"></script>
<script>
    /*
     对应操作说明: 除了抽出模块外仅有的操作
     OnlyRemove 仅有删除操作
     UnwKnow 需求出现差错暂无制作
     Out_In 出栏入栏等
     OK_Remove 有确定和删除操作
     Nothing 无操作
     */
    var actionFormatterList = {
        // equiMana
        "equiOperCont": "OperRemove",//设备控制
        "sensMana": "OnlyRemove",
        "enviContEquiMana": "OnlyRemove",
        "deviExceInfoChec": "OnlyRemove",
        // pigMana
        "stanSett": "OnlyRemove",
        "growStat": "UnwKnow",// 生长情况统计
        "suspIllnStat": "OK_Remove",
        "pigElimMana": "Out_In",
        "formColl": "OnlyRemove",
        "feedRegu": "UnwKnow",// 饲喂调控
        "feedStat": "Nothing",
        "pigInfoMana": "OnlyRemove",
        "vaccSett": "Nothing",
        "vaccMana": "Nothing",
        "diseMana": "OK_Remove",
        "destMana": "OnlyRemove",
        "entrMana": "OnlyRemove",
        "coluMana": "Nothing",
        "hurdMana": "OnlyRemove",
        "sowMana": "UnwKnow",// 母猪管理待定
        // user
        "userAudiActiDiag": "OK_Remove",
        "userCanc": "OnlyRemove",
        "consSett" :"OnlyRemove"
    }
    //不同 jsonUrl 表格操作不同
    function actionFormatter(value, row, index) {
        var actionFormatterUrl = jsonUrl.substring(jsonUrl.lastIndexOf("/")+1,jsonUrl.lastIndexOf("."));
        var returnActionFormatterStr = actionFormatterList[actionFormatterUrl];
        var returnActionFormatter = [];
        if (returnActionFormatterStr.trim() === "OK_Remove")
        {
            returnActionFormatter =
                [//OK_Remove
                '<a class="like" href="javascript:void(0)" data-toggle="tooltip" title="OK"><i class="glyphicon glyphicon-ok"></i></a>　',
                '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
                ]
        }
        else if (returnActionFormatterStr.trim() === "OperRemove")
        {
            returnActionFormatter =
                [
                    //operate_remove
                    '<a class="operate" href="javascript:void(0)" data-toggle="tooltip" title="是否自动处理异常"><i class="fa fa-circle-o"></i></a>　',
                    '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
                ]
        }
        else if (returnActionFormatterStr.trim() === "Out_In")
        {
            returnActionFormatter =
                [//Out_In
                    '<a class="like" href="javascript:void(0)" data-toggle="tooltip" title="OK"><i class="glyphicon glyphicon-log-out"></i></a>　',
                    '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-log-in"></i></a>']
        }
        else if (returnActionFormatterStr.trim() === "OnlyRemove")
        {
            returnActionFormatter =
                [
                    //OnlyRemove
                    '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
                ]
        }
        else if (actionFormatterUrl.trim() === "Nothing" ||actionFormatterUrl.trim() === "UnwKnow")
        {
            returnActionFormatter =
                [
                ]
        }
        return returnActionFormatter.join('');
    }

    // 操作click 事件
    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .remove': function (e, value, row, index) {
            alert('You click remove icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .operate':function (e, value, row, index) {
            var r = confirm("是否自动调控");
            if (r == true){
                    alert("进入自动调控");
            }
            else if(r == false){
                    alert("取消自动调控");
            }
        }
    };
//生成表格
    function dynamicGeneratedTables (json) {
        //console.log(jsonUrl);
        var columnsArray = [];
        columnsArray.push({field: "cloumn_state", checkbox: true});
        //columnsArray.push({halign: "center"});
        //console.log(json[1][0])
        // console.log(Object.keys(json[1]))
        for (var i = 0; i < (Object.keys(json[0][0])).length; i++) {//Object.keys(obj) 获取key名称
            var property = (Object.keys(json[0][0]))[i];// 数据表名
            var CN_property = (json[0][0][property]);// 标题
            //console.log(CN_property);
            columnsArray.push({
                "title": CN_property,
                "field": property,
                halign: "center",
                switchable: true,
                sortable: true
            });
        }

        columnsArray.push({field: 'action', title: '操作',
            halign: 'center', align: 'center', formatter: 'actionFormatter',
            events: 'actionEvents', clickToSelect: false});
        //console.log(columnsArray);
        $('#table').bootstrapTable('destroy').bootstrapTable({
            data: json[1],
            height: getHeight(),
            striped: true,
            searchOnEnterKey: true,
            buttonToolbar: '#buttons-toolbar',
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            minimumCountColumns: 2,
            showPaginationSwitch: true,
            clickToSelect: true,
            detailView: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            classes: 'table table-hover table-no-bordered',
            //sidePagination: 'server',
            //silentSort: false,
            smartDisplay: false,
            sortName: 'id',
            sortOrder: 'desc',
            escape: true,
            idField: 'systemId',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: columnsArray,
        });
    }
//录入
    function dynamicGeneratedMessageInput (json) {
        var createsettingDialogInHtml = '';
        for (var i = 0; i < (Object.keys(json[0][0])).length; i++) {//Object.keys(obj) 获取key名称
            var property = (Object.keys(json[0][0]))[i];// 数据表名
            var CN_property = (json[0][0][property]);// 标题么
            createsettingDialogInHtml=createsettingDialogInHtml+ '<div class="input-control" >'+
                '<input type="text" class="form-control" ' +
                'placeholder='+CN_property+ ' name='+property+' >'
                +'</div>'
        }
        $('#createimportDialog',parent.document).html(createsettingDialogInHtml);
    }

//设置
    function dynamicGeneratedMessageSetting (json) {
        // console.log($('#createsettingDialog',parent.document).html());
        var createsettingDialogInHtml = '';
        for (var i = 0; i < (Object.keys(json[0][0])).length; i++) {//Object.keys(obj) 获取key名称
            var property = (Object.keys(json[0][0]))[i];// 数据表名
            var CN_property = (json[0][0][property]);// 标题
            createsettingDialogInHtml=createsettingDialogInHtml+ '<div class="input-control" >'+
                '<input type="text" class="form-control" ' +
                'placeholder='+CN_property+ ' name='+property+' >'
            +'</div>'
        }
        $('#createsettingDialog',parent.document).html(createsettingDialogInHtml);
    }


    var jsonUrl=window.parent.document.getElementById("jsonUrl").value;
    $("#table").bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: "GET",
                url: jsonUrl,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                json: 'callback',
                success: function (json) {
                    // 动态生成表格
                    dynamicGeneratedTables(json);
                    //  动态生成信息录入
                    dynamicGeneratedMessageInput(json);
                    //  动态生成信息设置
                    dynamicGeneratedMessageSetting(json);
                },
                error: function () {
                    alert("请求数据失败,请检查网络状况");
                }
            });
        }
    });

    if(jsonUrl == "resources/data/equiOperCont.json" || jsonUrl == "resources/data/userCanc.json"
    || jsonUrl == "resources/data/userAudiActiDiag.json" || jsonUrl == "formColl1.json" ||jsonUrl == "formColl2.json"
        || jsonUrl == "formColl3.json" || jsonUrl == "stanSett.json" || jsonUrl == "equiOperCont.json" ||
        jsonUrl == "feedMana.json" || jsonUrl == "formColl.json"|| jsonUrl == "feedRegu.json"
        || jsonUrl == "feedStat.json"|| jsonUrl == "pigInfoMana.json"|| jsonUrl == "pigSafeMana.json"||
        jsonUrl == "vaccSett.json" || jsonUrl == "vaccMana.json"|| jsonUrl == "diseMana.json"|| jsonUrl == "destMana.json" ||
    jsonUrl == "suspIllnStat.json" || jsonUrl == "pigElimMana.json"|| jsonUrl == "migrMana.json"|| jsonUrl == "entrMana.json"||
        jsonUrl == "coluMana.json"|| jsonUrl == "hurdMana.json"|| jsonUrl == "sowBree.json"|| jsonUrl == "weanCont.json"|| jsonUrl == "sowsDeli.json") {
        $('.visualization').attr("style", "display:none;");
        $('.fixed-table-body').attr("style", "height:500px");
    }else if (jsonUrl == "resources/data/consSett.json"){
        $('.jk_main').prepend("<button class='btn btn-primary btn-lg btn-watch' style='border-radius: 5px; border: none; box-shadow: 3px 3px 2px #b1b1b1; margin-left: 20px;margin-top: 10px;background-color:rgba(41,161,118,0.74);' data-toggle='modal' data-target='#cons'>点击查看可视化</button>");
        $('.visualization').attr("style", "display:none;");
        $('.fixed-table-body').attr("style", "height:500px");
    }
</script>
<script>
    // 仪表盘数据demo
    var seriesDate = [
        {
            name: '设备ID',
            type: 'gauge',
            min: 0,
            max: 45,
            detail: {formatter: '{value}°C',fontSize:14},
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                fontcolor:"#d7fcf7",
                offsetCenter: [0, '120%']
            },
            axisTickLabel:{
                fontSize:8
            },
            data: [
                {value: 28, name: '温度传感器 \n 0001 ',center: ['55%', '60%']}]
        },
        {
            name: '设备ID',
            type: 'gauge',
            min: 0,
            max: 45,
            detail: {formatter: '{value}°C',fontSize:14},
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                fontcolor:"#d7fcf7",
                offsetCenter: [0, '120%']
            },
            axisTickLabel:{
                fontSize:8
            },
            data: [
                {value: 27, name: '红外线体温计 \n 0002 ',center: ['55%', '60%']}]
        },
        {
            name: '设备ID',
            type: 'gauge',
            min: 0,
            max: 100,
            detail: {formatter: '{value}°%',fontSize:14},
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                fontcolor:"#d7fcf7",
                offsetCenter: [0, '120%']
            },
            axisTickLabel:{
                fontSize:8
            },
            data: [
                {value: 30, name: '湿度传感器 \n 0003 ',center: ['55%', '60%']}]
        },
        {
            name: '设备ID',
            type: 'gauge',
            min: 0,
            max: 200,
            detail: {formatter: '{value}°LUX',fontSize:14},
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                fontcolor:"#d7fcf7",
                offsetCenter: [0, '120%']
            },
            axisTickLabel:{
                fontSize:8
            },
            data: [
                {value: 80, name: '光照度检测仪 \n 0004 ',center: ['55%', '60%']}]
        },
        {
            name: '设备ID',
            type: 'gauge',
            // title:'声音传感器',
            min: 0,
            max: 100,
            detail: {formatter: '{value}dB',fontSize:14},
            title : {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                fontcolor:"#d7fcf7",
                offsetCenter: [0, '120%']
            },
            axisTickLabel:{
                fontSize:8
            },
            data: [
                {value: 30, name: '声音传感器 \n 0005 ',center: ['55%', '60%']}]
        }
    ];

    // 仪表盘
        var loadStringS = ["container1", "container2", "container3", "container4", "container5"];
        var myCharts = [];
        var options = [];
        for (var i = 0; i < loadStringS.length; i++) {
            option = null;
            //console.log(loadStringS[i]);
            var dom = document.getElementById(loadStringS[i]);
            var myChart = echarts.init(dom);
            myCharts[i] = myChart;
            option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}°C"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                pointer:{
                  length:"60%",
                    width:"3"
                },
                axisTickLabel:{
                  color:"yellow"
                },
                itemStyle:{
                    opacity:"0.3"
                },
                series: seriesDate[i]

            };
            options[i] = option;
            myChart.setOption(option);
        }
        for (var j = 0; j < 5; j++) {
            setInterval(function () {
                seriesDate[j].data[0].value = (random(20, 30)).toFixed(2) - 0;
                myCharts[j].setOption(options[j], true);

                console.log(j + " " + seriesDate[j].data[0].value);
            }, 2000);
        }
</script>

<!--折线图-->
<script>
    $(".wenduyibiaopan").click(function () {
        $("#myModa2").modal('show');
        loadQView();
    });
    // 加载曲线图
    function loadQView() {
        var dom = document.getElementById("qcontainer");
        var myChart = echarts.init(dom);
        option = null;
        option = {
            title: {
                text: '最近一周气温变化',
                subtext: '温度传感器0001'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最高气温', '最低气温']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name: '最高气温',
                    type: 'line',
                    data: [35, 36, 35, 37, 39, 38, 36],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '最低气温',
                    type: 'line',
                    data: [24, 22, 27, 27, 29, 28, 26],
                    markPoint: {
                        data: [
                            {name: '周最低', value: 22, xAxis: 1, yAxis: 22}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>


<!--pie图-->
<script>
    // 基于准备好的dom，初始化echarts实例
    var mypie = echarts.init(document.getElementById('pie'));
    pieoption = {
        title : {
            text: '详情',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[ '购买药', '疫苗', '饲料', '设备', '猪种', '员工工资', '水电费用',"投资"]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'购买药'},
                    {value:310, name:'疫苗'},
                    {value:234, name:'饲料'},
                    {value:135, name:'设备'},
                    {value:1548, name:'猪种'},
                    {value:135, name:'员工工资'},
                    {value:1548, name:'水电费用'},
                    {value:1548, name:'投资'},

                ]
            }
        ]
    };


    mypie.setOption(pieoption);
</script>

<!--柱状图-->
<script>
    var mybar = echarts.init(document.getElementById('bar'));
    baroption = {
        title : {
            text: '一个季度支出的情况'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['支付宝','微信','现金']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'支付宝',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'现金',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'微信',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    mybar.setOption(baroption);
</script>
</body>
</html>